<!-- 卡片>安全评估 -->
<template>
    <div class="columnChart">
        <div class="saftyAssets-content">
            <div class="card-title">
                <span class="card-title-text">安全评估</span>
            </div>
            <!-- 跳转》安全指数 -->
            <div
                class="saftyAssets-chart"
                @click="
                    $Ctl.enterDetail('FireSafetyAssess', {
                        orgId: orgnizationId
                    })
                "
            >
                <div class="score">
                    <p class="title1">{{ score }}</p>
                    <p class="title2">{{ tips }}</p>
                </div>
                <!--  :style="{ color: currentColor}" -->
                <div class="chart" :id="'saftyAssetsChart_' + getNewId"></div>
            </div>
            <div class="saftyAssets-sys-items">
                <!-- 跳转》设备清单 -->
                <div
                    class="each-itme"
                    @click="
                        $Ctl.enterDetail('EquipmentList', {
                            orgId: orgnizationId
                        })
                    "
                >
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_xitong"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">
                            系统<i class="iconfont iconjiantou"></i>
                        </div>
                        <div class="number">{{ sysCount }}</div>
                    </div>
                </div>
                <!-- 跳转》设备一张图 -->
                <div
                    class="each-itme"
                    @click="
                        $Ctl.enterChild('MapEquipment', {
                            markType: 0,
                            orgIds: orgnizationId
                        })
                    "
                >
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_shebei"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">
                            设备<i class="iconfont iconjiantou"></i>
                        </div>
                        <div class="number">{{ deviceCount }}</div>
                    </div>
                </div>
                <!-- 跳转》设备一张图并选中视频 -->
                <div
                    class="each-itme"
                    @click="
                        $Ctl.enterChild('MapEquipment', {
                            markType: '3,4',
                            orgIds: orgnizationId
                        })
                    "
                >
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_shipin"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">
                            视频<i class="iconfont iconjiantou"></i>
                        </div>
                        <div class="number">{{ videoCount }}</div>
                    </div>
                </div>
                <div class="each-itme" style="cursor: default;">
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_xiaofangzichan"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">消防资产</div>
                        <div class="number">{{ assetsCount }}</div>
                    </div>
                </div>
                <div class="each-itme" style="cursor: default;">
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_xiaokongshi"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">消控室</div>
                        <div class="number">{{ controlRoom }}</div>
                    </div>
                </div>
                <div class="each-itme" style="cursor: default;">
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_xiaofangrenyuan"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">消防人员</div>
                        <div class="number">{{ userCount }}</div>
                    </div>
                </div>
                <div class="each-itme" style="cursor: default;">
                    <div class="left">
                        <i class="iconfont iconweibiaoti-_yingjiyuan"></i>
                    </div>
                    <div class="right">
                        <div class="tittle">应急预案</div>
                        <div class="number">{{ emergencyPlanCount }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { getScoreItemDetail } from "@/api/safetyIndex";
import { getOrgAllCount } from "@/api/organization";

let Echarts = require("echarts/lib/echarts");
require("echarts/lib/chart/radar");
require("echarts/lib/component/tooltip");
export default {
    data() {
        return {
            myChart: {},
            sysCount: 0, //消防系统数量
            deviceCount: 0, //设备
            videoCount: 0, //视频
            assetsCount: 0, //资产数量
            controlRoom: 0, //消控室
            userCount: 0, //消防员
            emergencyPlanCount: 0, //预案
            currentColor: "#47CFAD",
            getNewId: new Date().getTime(),
            score: 0,
            tips: "安全",
            isMuilUnitUser: this.$store.state.userInfo.isMuilUnitUser //0:单单位用户;1:多单位用户
        };
    },
    components: {},
    props: {
        orgnizationId: {
            require: true
        }
    },
    methods: {
        //图表
        getChartData() {
            let that = this;
            getScoreItemDetail({
                orgId: that.orgnizationId
            }).then(res => {
                if (res.status === 200) {
                    that.dealData(res.data);
                }
            });
        },
        dealData(detailData) {
            let that = this;
            that.score = detailData.score;
            that.currentColor = that.getColorByScore(that.score, 1);
            if (79.9 < that.score && that.score < 89.9) {
                //风险
                that.tips = "危险";
            } else if (that.score < 80) {
                //高危
                that.tips = "告急";
            } else {
                //安全
                that.tips = "安全";
            }
            that.indicatorArr = [];
            let dataArr = [];
            let _formatterhtml = "实时安全评估<br/>";
            for (let key in detailData) {
                if (["1", "2", "3", "4", "5", "6"].indexOf(key) > -1) {
                    let _obj = detailData[key];
                    let _score =
                        (_obj.value ? parseFloat(_obj.value) : 0) > 100
                            ? 0
                            : 100 - (_obj.value ? parseFloat(_obj.value) : 0);
                    that.indicatorArr.push({
                        name: _obj.groupName,
                        max: 100,
                        min: 0,
                        value: _obj.value,
                        groupId: _obj.groupId
                    });
                    _formatterhtml +=
                        _obj.groupName +
                        "：" +
                        (+_obj.value == 0 ? "" : "-") +
                        _obj.value +
                        "<br/>";
                    dataArr.push(_score);
                }
            }
            if (dataArr.length == 0) return;
            that.chartOption = {
                title: {
                    text: ""
                },
                tooltip: {
                    trigger: "item",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "rgba(0,0,0,0.8)"
                        }
                    },
                    formatter: function(params) {
                        return _formatterhtml;
                    }
                },
                legend: {
                    data: []
                },
                radar: {
                    // shape: 'circle',
                    splitArea: false,
                    splitLine: {
                        //一圈圈的
                        lineStyle: {
                            color: ["rgba(136,144,171,0.6)"], //// 使用深浅的间隔色 color: ['#aaa', '#ddd']
                            width: 0.8
                        }
                    },
                    axisLine: {
                        //互相交错的
                        lineStyle: {
                            color: ["rgba(136,144,171,0.6)"], //// 使用深浅的间隔色 color: ['#aaa', '#ddd']
                            width: 0.8
                        }
                    },
                    splitNumber: 4, //有多少格
                    name: null,
                    indicator: that.indicatorArr
                },
                series: [
                    {
                        name: "实时安全评估",
                        type: "radar",
                        symbol: "none",
                        lineStyle: {
                            normal: {
                                color: that.currentColor,
                                opacity: 1
                            }
                        },
                        areaStyle: {
                            normal: {
                                color: that.currentColor,
                                opacity: 0.4
                            }
                        },
                        data: [
                            {
                                value: dataArr,
                                name: "实时安全评估"
                            }
                        ]
                    }
                ]
            };
            // 基于准备好的dom，初始化echarts实例
            let $dom = document.getElementById(
                "saftyAssetsChart_" + that.getNewId
            );
            if ($dom) {
                //图表
                that.myChart = Echarts.init($dom);
                that.myChart.setOption(that.chartOption);
                that._initChart();
            }
        },
        _initChart() {
            this.$root.charts.push(this.myChart);
            window.addEventListener(
                "resize",
                function() {
                    this.myChart.resize();
                }.bind(this)
            );
        },
        //系統列表
        //1:安全重点 2:火灾高危 3:高危信号 4:重大问题 5:报警 6:隐患 7:巡检 8:安全 9:危险 10:告急
        //11:设备数量 12:视频数量 13:接入单位 14:消防系统 15:消防资产 16:预案 17:消防人员 18:消控室
        initSaftySysList() {
            let that = this;
            getOrgAllCount({
                orgIds: that.orgnizationId,
                countTypes: "14,11,12,15,18,17,16"
            }).then(res => {
                if (res.status === 200) {
                    that.sysCount = res.data.sysCount || 0; //消防系统数量
                    that.deviceCount = res.data.deviceCount || 0; //设备
                    that.videoCount = res.data.videoCount || 0; //视频
                    that.assetsCount = res.data.assetsCount || 0; //资产数量
                    that.controlRoom = res.data.controlRoom || 0; //消控室
                    that.userCount = res.data.userCount || 0; //消防员
                    that.emergencyPlanCount = res.data.emergencyPlanCount || 0; //预案
                }
            });
        },
        getColorByScore(score, getRgba) {
            let fixScore = parseFloat(parseFloat(score).toFixed(1));
            if (79.9 < fixScore && fixScore < 89.9) {
                //风险
                return getRgba ? "#FFB32D" : "yellow";
            } else if (fixScore < 80) {
                //高危
                return getRgba ? "#FD5E5E" : "red";
            } else {
                //安全
                return getRgba ? "#47CFAD" : "green";
            }
        }
    },
    created() {
        let that = this;
        that.$nextTick(() => {
            that.getChartData();
            that.initSaftySysList();
        });

        if (
            !that.isMuilUnitUser ||
            (that.isMuilUnitUser && !that.orgnizationId)
        ) {
            //推送只推一级首页
            window.FunList.sigeleOrgSafetyScore_ws = that.dealData;
        }
    }
};
</script>
<style scoped rel="stylesheet/scss" lang="scss">
.columnChart {
    height: 100%;
    width: 100%;
    .saftyAssets-content {
        width: 100%;
        height: 100%;
        position: relative;
        .saftyAssets-chart {
            position: relative;
            width: 100%;
            height: 300px;
            cursor: pointer;
            .score {
                z-index: 2;
                position: absolute;
                top: 32%;
                width: 100%;
                color: rgba(255, 255, 255, 1);
                text-align: center;
                .title1 {
                    font-size: 58px;
                    line-height: 65px;
                }
                .title2 {
                    font-size: 32px;
                }
            }
            .chart {
                z-index: 1;
                width: 100%;
                height: 100%;
            }
        }
        .saftyAssets-sys-items {
            color: #a3bedd;
            font-size: 20px;
            .each-itme {
                width: fit-content;
                padding: 10px 0;
                display: flex;
                flex-direction: row;
                justify-content: flex-start;
                align-items: center;
                cursor: pointer;
                .left {
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                    border: 1px solid #428ce0;
                    border-radius: 50%;
                    box-shadow: 0px 0px 6px #4892f8 inset;
                    background-color: rgba(66, 140, 224, 0.2);
                    i {
                        font-size: 24px;
                        color: #59b6f2;
                        background-image: -webkit-gradient(
                            linear,
                            0 top,
                            0 bottom,
                            from(rgb(96, 195, 248)),
                            to(rgb(53, 117, 213))
                        );
                        -webkit-background-clip: text; /*必需加前缀 -webkit- 才支持这个text值 */
                        -webkit-text-fill-color: transparent; /*text-fill-color会覆盖color所定义的字体颜色： */
                    }
                }
                .right {
                    padding-left: 15px;
                }
                .tittle {
                    display: flex;
                    color: #a3bedd;
                    font-size: 18px;
                    .iconfont {
                        margin-top: 5px;
                        margin-left: 5px;
                        font-size: 12px;
                    }
                }
                .number {
                    color: #fff;
                    line-height: 34px;
                    font-size: 22px;
                    font-family: "DigitaldreamFat";
                }
            }
        }
    }
}
</style>
